<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <style>
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(100px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
        }
    </style>
</head>
<body>
<div id="app">
    <!--<a href="#/login">登录</a>-->
    <!--<a href="#/register">注册</a>-->

    <!--router-link 默认渲染为一个a标签, tag属性可以自定义标签-->
    <router-link to="/login">登录</router-link>
    <router-link to="register">注册</router-link>


    <!--这是vue-router提供的元素，专门用来当作占位符的，将来路由规则，匹配到的组件就会展示到这个router-view中去-->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>

</div>

</body>
<script>
    var login = {
        template: '<h1>登录组件</h1>'
    };
    var register = {
        template: '<h1>注册组件</h1>'
    };


    // 在new路由对象的时候，可以为构造函数，传递一个配置对象
    var routerObj = new VueRouter({
        // route  表示【路由匹配规则】的意思
        routes: [ // 路由匹配规则
            // 每个路由规则都是一个对象，这个规则对象，有两个必须的属性：
            // 属性1： path  表示监听哪个路由链接地址
            // 属性2： component，表示如果路由是前面匹配到的path，则展示component属性对应的组件。
            // 注意：component的属性值，必须是一个组件的模板对象（字面量表达式）， 不能是组件的引用名称
            // {path: '/', component: login},
            {path: '/', redirect: '/login'},  // 重定向设置默认的显示组件
            {path: '/login', component: login},
            {path: '/register', component: register},
        ],
        linkActiveClass: 'myActive'
    });


    var vm = new Vue({
        el: '#app',
        data: {
            msg: '大家好哈哈哈哈，你们好啊。'
        },
        methods: {},
        router: routerObj, // 将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件。
        watch: {
            '$route.path': function (newVal, oldVal) {
                if(newVal === '/login'){
                    console.log('欢迎进入登录页面')
                }else{
                    console.log('欢迎进入注册页面')
                }
            }
        }

    })
</script>
</html>